(function (Vue) {
  Vue.component("home", {
    template: `
        <h1>主页组件</h1>
        `,
  });
  Vue.component("product", {
    template: `
        <h1>产品组件</h1>
        `,
  });
  Vue.component("profile", {
    template: `
        <h1>公司介绍组件</h1>
        `,
  });
  let routes = [
    {
      path: "/home",
      component: "home",
    },
    {
      path: "/product",
      component: "product",
    },
    {
      path: "/profile",
      component: "profile",
    }
  ];
  // 添加 hash change 监听事件
  window.addEventListener("hashchange", function (e) {
    // console.log(e);
    console.log(window.location.hash);
    let path = window.location.hash.split("#")[1];// /product /profile /home
    // 寻找路由对应的配置项
    let route_item = routes.find(v=>{
        if(v.path === path){
            return true;
        }
    })
    console.log(route_item);
    console.log(vm.componentId);
    vm.componentId = route_item.component;
  });
})(Vue);
